<template>
  <div class="padding10">
    <div class="padding-bottom10">
      <Breadcrumb>
        <BreadcrumbItem>系统管理</BreadcrumbItem>
        <BreadcrumbItem>${crudBean.description}管理</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div>
      <Form :model="queryParams" :label-width="0" label-position="right">
        <FormItem>
          <Input search enter-button placeholder="搜索" v-model="queryParams.searchCode"
                 @on-search="query(undefined,undefined)" style="width:250px"/>
        </FormItem>
        <FormItem>
          <Button @click="add${modelName}" type="primary">
            <Icon type="md-add"/>
            新增
          </Button>
        </FormItem>
      </Form>
    </div>
    <div>
      <Table border :columns="table.columns" :data="table.rows" :loading="loading"></Table>
      <Page :total="table.total" :current="table.pageNumber" :page-size="table.pageSize" show-sizer
            show-elevator show-total style="padding: 10px 0 20px 20px"
            @on-change="handleCurrentChange" @on-page-size-change='handleSizeChange'/>
    </div>
    <Modal
      v-model="${modelParamName}Modal.show"
      :title="${modelParamName}Modal.title">
      <Form :model="${modelParamName}Modal.data" ref="form" :rules="formRules" :label-width="100" label-position="right">
      <#list columns as column>
        <#if column.columnAttributes.formShowable>
         <FormItem label="${column.columnDesc}" prop="${column.columnName}">
             <Input placeholder="${column.columnDesc}" v-model="${modelParamName}Modal.data.${column.columnName}" style="width:100%"/>
         </FormItem>
        </#if>
      </#list>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="save${modelName}" :loading="${modelParamName}Modal.loading">保存</Button>
        <Button @click="${modelParamName}Modal.show=false">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {${modelName}} from '@/util/resource'

  export default {
    name: "${modelName}",
    data() {
      return {
        loading: false,
        ${modelParamName}Modal: {
          show: false,
          title: "",
          data: {},
          _data: {},
          isAdd: false,
          loading: false
        },
        formRules: {
        <#list columns as column>
          ${column.columnName}: [
            {required:  ${column.columnAttributes.nullable?string('true','false')}, message: "${column.columnDesc}不能为空", trigger: "blur"},
           <#if column.columnAttributes.uniqueable>
            {
                validator: async (rule, value, callback) => {
                    if (this.${modelParamName}Modal._data.${column.columnName} === value) {
                        return callback()
                    }
                    let res = await ${modelName}.exists("${column.columnName}", value)
                    if (res.data.valid) {
                        return callback(new Error('${column.columnDesc}已存在'))
                    } else {
                        return callback()
                    }
                }, trigger: 'blur'
            }
           </#if>
          ],
        </#list>
        },
        queryParams: {
          searchCode: "",
          name: "",
          phone: ""
        },
        table: {
          columns: [
            <#list columns as column>
            <#if column.columnAttributes.gridShowable == true>
             {title: '${column.columnDesc}', key: '${column.columnName}'},
            </#if>
            </#list>
            {
              title: '操作', key: 'action', fixed: 'right', align: 'center', width: 120,
              render: (h, params) => {
                return h('div', [
                  h('a', {
                    props: {
                      type: 'text',
                      size: 'small'
                    },
                    style: {
                      color: '#2D8CF0'
                    },
                    on: {
                      click: () => {
                        this.edit${modelName}(params.row)
                      }
                    }
                  }, '编辑'), '  |  ',
                  h('a', {
                    props: {
                      type: 'text',
                      size: 'small'
                    },
                    style: {
                      color: '#2D8CF0'
                    },
                    on: {
                      click: () => {
                        this.$Modal.confirm({
                          title: '确认删除',
                          content: '<p>您确认删除该记录吗？</p>',
                          okText: '删除',
                          cancelText: '取消',
                          onOk: () => {
                            this.delete${modelName}(params.row.id)
                          }
                        })
                      }
                    }
                  }, '删除')
                ])
              }
            }
          ],
          rows: [],
          total: 0,
          pageSize: 10,
          pageNumber: 1,
        },
      }
    },
    created() {
      this.query()
    },
    methods: {
      handleSizeChange(val) {
        this.query(val)
      },
      handleCurrentChange(val) {
        this.query(undefined, val)
      },
      async query(pageSize, pageNumber) {
        <#list columns as column>
        this.queryParams.${column.columnName} = this.queryParams.searchCode
        </#list>
        await ${modelName}.paging(this, pageNumber, pageSize)
      },
      async delete${modelName}(id) {
        let res = await ${modelName}.del(id)
        if (res.data.success) {
          this.$Message.success('删除成功!')
          this.query()
        } else {
          this.$Message.error('删除失败!')
        }
      },
      add${modelName}() {
        this.${modelParamName}Modal = {
          title: "新增${crudBean.description}",
          show: true,
          data: {},
          _data: {},
          isAdd: true,
        }
      },
      edit${modelName}(row) {
        this.${modelParamName}Modal = {
          title: "编辑${crudBean.description}",
          show: true,
          data: {...row},
          _data: {...row},
          isAdd: false,
        }
      },
      save${modelName}() {
        this.$refs["form"].validate(async valid => {
          if (valid) {
            this.${modelParamName}Modal.loading = true
            let res = await ${modelName}.save(this.${modelParamName}Modal.data, this.${modelParamName}Modal.isAdd ? "post" : "put")
            if (res.data.success) {
              this.$Message.success('保存成功!')
              this.query()
            } else {
              this.$Message.error('保存失败!')
            }
            this.${modelParamName}Modal.loading = false
            this.${modelParamName}Modal.show = false
          }
        })
      },
    }
  }
</script>

<style scoped>
  .padding10 {
    padding: 10px;
  }

  .padding-bottom10 {
    padding-bottom: 10px;
  }
</style>
